import React, {useEffect, useState} from "react";
import {Button, Modal, Table, Tree} from "antd";
import axios from "axios";
import {DeleteOutlined, EditOutlined, ExclamationCircleOutlined} from "@ant-design/icons";

export default function RoleList() {
    const [dataSource, setDataSource] = useState([])
    const [rightList, setRightList] = useState([])
    const [currentRight, setCurrentRight] = useState([])
    const [currentId, setCurrentId] = useState(0)
    const [isModalVisible, setIsModelVisible] = useState(false)
    useEffect(()=>{
        axios.get("/roles").then(res=>{
            console.log(res.data)
            setDataSource(res.data)
        })
    },[])
    useEffect(()=>{
        axios.get("/rights?_embed=children").then(res=>{
            setRightList(res.data)
        })
    },[])
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id'
        },
        {
            title: '角色名称',
            dataIndex: 'roleName'
        },
        {
            title: '操作',
            render:(item)=>{
                return <div>
                    <Button type="primary" shape="circle" icon={<EditOutlined />}
                            onClick={()=>{
                                setIsModelVisible(true)
                                setCurrentRight(item.rights)
                                setCurrentId(item.id)
                            }}/>

                    <Button type="danger" shape="circle" icon={<DeleteOutlined />}
                            onClick={()=>confirmMethod(item)}/>
                </div>
            }
        }
    ]
    const { confirm } = Modal;
    const confirmMethod = (item)=>{
        confirm({
            title: '你确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            // content: 'Some descriptions',
            onOk() {
                deleteMethod(item)
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    const deleteMethod = (item)=>{
        axios.delete('/roles/' + item.id).then(res=>{
            setDataSource(dataSource.filter(data=>data.id!==item.id))
        })
    }
    const handleOk = ()=>{
        console.log(currentRight,currentId)
        setIsModelVisible(false)
        //patch
        axios.patch('/roles/' + currentId,{
            rights:currentRight
        }).then(res=>{
            //同步datasource
            setDataSource(dataSource.map(item=>{
                if(item.id===currentId){
                    return {
                        ...item,
                        rights:currentRight
                    }
                }
                return item
            }))
        })
    }
    const onCheck = (checkKeys)=>{
        // console.log(checkKeys)
        setCurrentRight(checkKeys.checked)
    }


    return (
        <div>
            <Table dataSource={dataSource} columns={columns} rowKey={(item)=>item.id}>

            </Table>
            <Modal title="权限分配" visible={isModalVisible} onOk={handleOk}
                   onCancel={()=>{setIsModelVisible(false)}}>
                <Tree
                    checkable
                    // defaultExpandedKeys={['0-0-0', '0-0-1']}
                    // defaultSelectedKeys={['0-0-0', '0-0-1']}
                    checkedKeys={currentRight}
                    // onSelect={onSelect}
                    onCheck={onCheck}
                    checkStrictly = {true}
                    treeData={rightList}
                />
            </Modal>
        </div>
    )
}